<template>
  <el-col :span="24">
    <el-card class="card">
      <el-table :data="data.slice((page-1)*pagesize,page*pagesize)" style="width: 100%" empty-text="暂无用户">
        <el-table-column prop="username" label="用户名" width="160"></el-table-column>
        <el-table-column prop="password" label="密码"></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="sex" label="性别"></el-table-column>
        <el-table-column prop="phone" label="电话"></el-table-column>
        <el-table-column prop="email" label="邮箱" width="200"> </el-table-column>
        <el-table-column prop="introduce" label="个人介绍" width="250"></el-table-column>
        <el-table-column fixed="right" label="操作" width="160" align="center">
          <template slot-scope="scope">
            <el-button @click="replyWin(scope.row)" size="mini">编辑</el-button>
            <el-button @click="deleteUser(scope.row)" type="danger" size="mini">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="用户信息" :visible.sync="isOpen" width="40%" :before-close="beforeClose">
        <div>
          <el-form :model="dataForm" :rules="rules" ref="dataForm" label-width="120px">
            <el-form-item label="用户名" prop="temperature1">
              <el-input v-model="dataForm.username" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="密码" :rules="rules.password" prop="temperature2">
              <el-input v-model="dataForm.password"></el-input>
            </el-form-item>
            <el-form-item label="姓名" prop="">
              <el-input v-model="dataForm.name"></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-radio-group v-model="dataForm.sex">
                <el-radio :label="1">男</el-radio>
                <el-radio :label="2">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="电话" :rules="rules.phone" prop="">
              <el-input v-model="dataForm.phone"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" :rules="rules.email" prop="">
              <el-input v-model="dataForm.email"></el-input>
            </el-form-item>
            <el-form-item label="个人介绍">
              <el-input v-model="dataForm.introduce"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="isOpen = false">取 消</el-button>
          <el-button type="primary" @click="submitForm('dataForm')">更新</el-button>
        </span>
      </el-dialog>
      <Paging @curr-page="currPage" :total="total"></Paging>
    </el-card>
  </el-col>
</template>

<script>
import Paging from "../components/Paging"
import {
  axiosUtil
} from "../network/axiosUtil"

export default {
  name: "UserManage",
  data () {
    var validateInput = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('该项不能为空'));
      }
      value = Number(value)
      if (!Number.isFinite(value) || value < 32 || value > 42) {
        callback(new Error('请输入正确的体温数值，例：36.7'));
      } else {
        callback();
      }
    };
    return {
      data: [],
      isOpen: false,
      isSubmit: false,
      username: '',
      dataForm: {
        username: '',
        password: '',
        name: '',
        sex: 1,
        phone: '',
        email: '',
        introduce: ''
      },
      rules: {
        temperature: [{
          validator: validateInput,
          trigger: "blur"
        }]
      },
      total: 0, //返回数据总数
      pagesize: 10,
      page: 1 //当前页数
    }
  },
  methods: {

    //打开窗口，默认显示对方用户名，且不可修改
    replyWin (row) {
      this.isOpen = true
      this.dataForm = row
    },

    submitForm (dataForm) {
      this.$refs[dataForm].validate((valid) => {
        if (valid) {
          this.updateMessage(dataForm)
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

    deleteUser (row) {
      axiosUtil({
        url: "/user/delete",
        method: "get",
        params: {
          username: row.username
        }
      }).then(data => {
        if (data) {
          this.$message({
            message: '删除成功',
            type: 'success'
          });
          this.queryTable()
        } else {
          this.$message.error('删除成功')
        }
      })
    },

    //点击右上角的关闭按钮前，也需要询问是否放弃本次提交
    beforeClose (done) {
      let state = confirm("是否放弃提交？")
      if (!state) {
        this.updateMessage('dataForm')
      } else {
        done()
      }
    },
    /**
     * 更新信息，发送请求
     * */
    updateMessage (dataForm) {
      var params = this.$refs[dataForm].model
      params.username = this.username
      axiosUtil({
        url: '/user/update',
        method: 'POST',
        data: {
          user: params,
        }
      }).then(data => {
        if (data && data != null) {
          this.$message({
            message: '更新成功',
            type: 'success'
          });
          this.isOpen = false
          this.queryTable()
        } else {
          this.$message.error('更新失败');
        }
      })
    },
    currPage (currPage) {
      this.page = currPage
    },
    queryTable () {
      axiosUtil({
        url: '/user/list',
        method: 'get',
      }).then(data => {
        if (data && data != '') {
          this.data = data.filter((item) => item.admin != 1)
          console.log(this.data)
          this.total = this.data.length
        } else {
          this.data = []
        }
      })
    }
  },

  mounted () {
    this.username = this.$store.state.userInfo.user.username
    this.queryTable()
  },
  components: {
    Paging,
  }
}
</script>

<style scoped>
</style>